


Crimson Perfume (Responsive) AO3 Skin

by Blossom Utonium (Hinata28h)



Category: AO3 Skin - Fandom
Genre: Demo - Freeform, Demonstration, Example, Gen, Other
Language: English
Status: Completed
Published: 2020-12-07
Updated: 2020-12-07
Packaged: 2021-03-09 21:47:57
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,540
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/27933346
Author URL: https://archiveofourown.org/users/Hinata28h/pseuds/Blossom%20Utonium
Summary: An attractive Crimson Rose Perfume Inspired Site Skin; Edited by Hinata28h, based from Reversi by AO3.Dec.07.2020:Scrollbars AddedDec.07.2020:Overflow-y Class AddedDec.17.2020:Work Skin Added; Text Indent Removed> Recommended that the alternative<hr>class tags remain for Work Skin to be always seen.>[text-indent]from#chaptersremoved as it was interrupting the[center]feature.Dec.23.2020:[text-indent]&[p.center]Class Added>[text-indent]for#workskin #chapters div.userstuff phas been re-added.>[p.center]class for#workskin #chapters div.userstuff phas been added.> Use<p class="center">text</p>to ensure[text-indent]is not used.Mar.01.2021:[li.blurb .tags]Class Added> [li.blurb .tags] code originally byXparrot





	Crimson Perfume (Responsive) AO3 Skin

**Crimson Perfume (Responsive)**

> Must be logged in to view. C&P code below. THIS IS A CITE SKIN.

* * *

**Rules**

> There are none since this was a modified edit. Maybe bookmark to check updates.  
> Users are allowed to modify this edit however they like.

* * *

**Recommended Resources**

> [Notepad++](https://notepad-plus-plus.org/) (for code writing, save file as ".css")  
> [ColorHexa](https://www.colorhexa.com/) (for color codes)  
> [W3Schools](https://www.w3schools.com/) (CSS code help)

* * *

**Updates**

> **Dec.07.2020:** Scrollbars Added  
>  **Dec.07.2020:** Overflow-y Class Added  
>  **Dec.17.2020:** Work Skin Added  
> > Recommended that the alternative <hr> class tags remain for Work Skin to be seen.  
> > [text-indent] from #chapters removed as it was interrupting the [center] feature.  
>   
>  **Dec.23.2020:** [text-Indent] & [p.center] Class Added  
> > [text-indent] for #workskin #chapters div.userstuff p has been re-added.  
> > [p.center] class for #workskin #chapters div.userstuff p has been added.  
> > Use <p class="center">text</p> to ensure [text-indent] is not used.
> 
> **Mar.01.2021:** [li.blurb .tags] Class Added  
> > [li.blurb .tags] code originally by [Xparrot](https://archiveofourown.org/skins/3756)

* * *

**CSS**

#outer .region {  
background: rgba(21,7,21,0.75);  
}

#inner {  
background: #210309 url("https://static.tumblr.com/0fultrp/yYAqkwqme/repeating-pattern-backgrounds-tumblr.jpg");  
padding: 24px 16px;  
}

#footer .group,  
.post fieldset fieldset,  
fieldset fieldset {  
background: none;  
}

body,  
.group,  
.group .group,  
.region,  
.flash,  
fieldset,  
fieldset fieldset ul,  
form dl,  
textarea,  
#main .verbose legend,  
.verbose fieldset,  
.notice,  
ul.notes,  
input,  
textarea,  
table,  
th,  
td:hover,  
tr:hover,  
.symbol .question:hover,  
#modal,  
.ui-sortable li,  
.required .autocomplete,  
.autocomplete .notice,  
.system .intro,  
.comment_error,  
div.dynamic,  
.dynamic form,  
#ui-datepicker-div,  
.ui-datepicker table {  
background: #210309;  
color: pink;  
border-color: crimson;  
outline: #0a0103;  
box-shadow: none;  
padding: 5px;  
}

#header .actions a:hover,  
#header .actions a:focus,  
#header .dropdown:hover a,  
#header .open a,  
#header .menu,  
#small_login,  
#header .dropdown:hover .current + .menu,  
.group.listbox,  
fieldset fieldset.listbox,  
form blockquote.userstuff,  
input:focus,  
textarea:focus,  
li.relationships a,  
.group.listbox .index,  
.dashboard fieldset fieldset.listbox .index,  
#dashboard a:hover,  
th,  
#dashboard .secondary,  
.secondary,  
.thread .even,  
.system .tweet_list li,  
.ui-datepicker tr:hover {  
background: rgba(33,3,9,.5);  
outline: 0;  
}

#header .dropdown .menu a:hover,  
#header .dropdown .menu a:focus,  
.splash .favorite li:nth-of-type(odd) a,  
.ui-datepicker td:hover,  
#tos_prompt .heading,  
#tos_prompt [disabled] {  
background: #0a0103;  
outline: 0;  
}

#main a:hover,  
.menu a:hover {  
color: #fff;  
}

#outer,  
.javascript,  
.statistics .index li:nth-of-type(even),  
#tos_prompt,  
.announcement input[type="submit"] {  
background: #210309;  
}

#header ul.primary,  
#outer #footer,  
.toggled form {  
background: pink url("https://static.tumblr.com/0fultrp/J47qky7pu/blurs.png");  
background-repeat: no-repeat;  
background-size: cover;  
}

#header ul.primary,  
#footer,  
#dashboard ul,  
dl.meta,  
.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
form blockquote.userstuff,  
div.comment,  
li.comment,  
.toggled form,  
form dl dt,  
#inner .module .heading,  
.bookmark .status span,  
.splash .news li,  
.filters .group dt.bookmarker {  
border-color: pink;  
}

.status.unread {  
background: transparent;  
}

.group.listbox,  
fieldset fieldset.listbox,  
#main li.blurb,  
.wrapper,  
#dashboard .secondary,  
.secondary,  
form blockquote.userstuff,  
.thread .comment,  
.toggled form {  
box-shadow: none;  
}

#dashboard .current,  
.actions a:active,  
#outer .current,  
a.current,  
.current a:visited,  
span.unread,  
.replied,  
span.claimed,  
.own,  
.draft,  
.draft .unread,  
.child,  
.unwrangled,  
.unreviewed,  
.ui-sortable li:hover {  
background: #000;  
border-color: crimson;  
box-shadow: none;  
outline: 0;  
}

dl.index dd {  
background: none;  
}

. current:hover {  
background: #500716;  
}

input,  
textarea {  
box-shadow: none;  
outline: 0;  
}

li.blurb,  
.blurb .blurb,  
.listbox .index,  
fieldset fieldset.listbox,  
.dashboard .listbox .index {  
box-shadow: none;  
}

#footer a:hover,  
#footer a:focus,  
.autocomplete .dropdown ul li:hover,  
li.selected,  
a.tag:hover,  
.listbox .heading a.tag:visited:hover,  
.symbol .question,  
.qtip-content {  
background: #b34b5a;  
color: #0a0103;  
outline: 0;  
}

.splash .favorite li:nth-of-type(odd) a:hover,  
.splash .favorite li:nth-of-type(odd) a:focus {  
background: #b34b5a;  
color: #0a0103;  
outline: 0;  
}

#header #greeting img,  
#header .heading a,  
#header .heading a:visited,  
#header .user a:hover,  
#header .user a:focus,  
#header .user .current,  
#header fieldset,  
#header form,  
#header p,  
#dashboard a:hover,  
.actions a:hover,  
.actions input:hover,  
.delete a,  
span.delete,  
span.unread,  
.replied,  
span.claimed,  
.draggable,  
.droppable,  
span.requested,  
a.work,  
.blurb h4 a:link,  
.blurb h4 img,  
.splash .module h3,  
.splash .browse li a:before,  
.required,  
.error,  
.comment_error,  
a.cloud7,  
a.cloud8,  
#footer .actions .secondary a,  
#tos_prompt .heading {  
color: #b34b5a;  
outline: 0;  
}

#greeting .icon,  
#dashboard,  
#dashboard.own,  
.error,  
.comment_error,  
.LV_invalid,  
.LV_invalid_field,  
input.LV_invalid_field:hover,  
input.LV_invalid_field:active,  
textarea.LV_invalid_field:hover,  
textarea.LV_invalid_field:active,  
#header .actions .current,  
.qtip-content {  
border-color: #b34b5a;  
}

a,  
a:link,  
a.tag,  
#header a,  
#header a:visited,  
#header .current,  
#dashboard a,  
#dashboard span,  
#dashboard .current,  
.heading,  
.group .heading,  
.filters dt a:hover {  
color: #ae88aa;  
outline: 0;  
}

#header .primary .open a,  
#header .primary.navigation.actions a,  
#header .primary .dropdown a:focus,  
#header #search input:focus,  
#header #search input:hover {  
color: #fff;  
outline: 0;  
}

#header .primary.navigation.actions a:hover {  
color: #b34b5a;  
}

a:visited,  
.actions a:visited,  
.action a:link,  
.action a:visited,  
.listbox .heading a:visited,  
span.series .divider {  
color: crimson;  
outline: 0;  
}

.actions a,  
.actions a:link,  
.action,  
.action:link,  
.actions input,  
input[type="submit"],  
button,  
.current,  
.actions label,  
#header .actions a {  
background: pink;  
border-color: crimson;  
color: crimson;  
box-shadow: none;  
text-shadow: none;  
outline: 0;  
}

.actions a:hover,  
.actions input:hover,  
#dashboard a:hover,  
.actions a:focus,  
.actions input:focus,  
#dashboard a:focus {  
background: #500716;  
color: #eee;  
border-color: #000;  
box-shadow: none;  
outline: 0;  
}

.actions a:active,  
.current,  
a.current,  
.current a:visited {  
color: crimson;  
background: pink;  
border-color: #fff;  
box-shadow: none;  
outline: 0;  
}

.delete a,  
span.delete {  
box-shadow: none;  
outline: 0;  
}

ul.required-tags,  
.bookmark .status span,  
.blurb .icon {  
opacity: 0.9;  
border: 0;  
}

#outer .group .heading,  
#header .actions a,  
#footer .secondary a,  
fieldset.listbox .heading,  
.userstuff .heading,  
.heading,  
.userstuff h2 {  
text-shadow: none;  
color: #fff;  
background: none;  
outline: 0;  
}

#header .actions a,  
fieldset fieldset,  
.mce-container button,  
.filters .expander {  
box-shadow: none;  
outline: 0;  
}

fieldset fieldset.listbox {  
outline: none;  
}

form dd.required {  
color: crimson;  
}

.mce-container input:focus {  
background: rgb(80,7,22);  
}

.announcement .userstuff a,  
.announcement .userstuff a:link,  
.announcement .userstuff a:visited:hover {  
color: #0a0103;  
outline: 0;  
}

.announcement .userstuff a:visited {  
color: #b76e79;  
}

.announcement .userstuff a:hover,  
.announcement .userstuff a:focus {  
color: #eee;  
outline: 0;  
}

.event.announcement .userstuff a,  
.filters .expander {  
color: #eee;  
outline: 0;  
}

.userstuff,  
#chapters {  
font-family: Verdana;  
}

.userstuff hr,  
#chapters hr {  
border: 1px dotted crimson;  
}

.userstuff blockquote,  
#chapters blockquote {  
border-left: 1px dotted crimson;  
padding-left: 5px;  
}

#chapters blockquote p.blcqt {/* <blockquote><p class="blcqt">text</p></blockquote>*/  
text-indent: 0 !important; /* removes text-indent.*/  
}

#chapters .overflow {/*<div class="overflow"><p>To create the boxes you see in demo.</p></div>*/  
border: 1px dotted crimson;  
margin-bottom: 10px;  
width: 100%;  
height: 200px;  
overflow-y: scroll;  
-webkit-user-select: all; /*This is what is letting you select all when clicking inside the overflow class.*/  
user-select: all;  
}

img.center {/*<img src="URL" class="center" alt="image description />"*/  
max-width: 100%;  
height: auto;  
display: block;  
margin-left: auto;  
margin-right: auto;  
}

::-moz-selection {  
color: crimson;  
background: black;  
}

::selection {  
color: crimson;  
background: black;  
}

::-webkit-scrollbar {  
height: 15px;  
width: 15px;  
border: 5px solid rgb(80,7,22);  
background: rgb(220,20,60);  
}

::-webkit-scrollbar-thumb {  
background: rgb(220,20,60) padding-box;  
border: solid rgb(80,7,22);  
border-width: 6px 0;  
}

.fandoms.heading,  
li.blurb .tags { /* Originally from https://archiveofourown.org/skins/3756 by Xparrot*/  
max-height: 120px;  
overflow-y: auto;  
}

* * *

**Work Skin CSS**

* * *

#workskin #chapters hr {  
border: 1px dotted crimson;  
}

#workskin #chapters hr.scissors {  
border: 0;  
border-top: 1px dashed #dc143c;  
}

#workskin #chapters hr.double {  
border: 0;  
border-top: 5px double #dc143c;  
}

#workskin #chapters hr.scissors:after {  
content: '\002702';  
display: inline-block;  
position: relative;  
top: -12px;  
left: 40px;  
color: #dc143c;  
font-size: 18px;  
}

#workskin #chapters hr.redroses {  
border: 0;  
height: 20px;  
background: url("https://static.tumblr.com/0fultrp/14bqlha0h/red_roses_divider_by_thispoisonedone.png") no-repeat top center;  
background-size: contain;  
display: block;  
position: relative;  
}

#workskin #chapters hr.redswirlup {  
border: 0;  
height: 20px;  
background: url("https://static.tumblr.com/0fultrp/8JLqlh7vw/red_swirl_by_albinoseaturtle.png") no-repeat top center;  
background-size: contain;  
display: block;  
position: relative;  
}

#workskin #chapters hr.redswirldown {  
border: 0;  
height: 20px;  
background: url("https://static.tumblr.com/0fultrp/Dhzqlh9x3/red_swirl_2_by_albinoseaturtle.png") no-repeat top center;  
background-size: contain;  
display: block;  
position: relative;  
}

#workskin #chapters hr.heartbeat {  
border: 0;  
height: 20px;  
background: url("https://static.tumblr.com/0fultrp/q50ql29b3/heartrate.gif") no-repeat top center;  
background-size: contain;  
display: block;  
position: relative;  
}

#workskin #chapters hr.redorb {  
background: url("https://static.tumblr.com/0fultrp/aUMqlh7kw/dark_red_orb_by_kayosa-stock.gif") no-repeat top center;  
background-size: contain;  
display: block;  
height: 18px;  
border: 0;  
position: relative;  
}

#workskin #chapters hr.redorb:before,  
#workskin #chapters hr.redorb:after {  
content: '';  
display: block;  
position: absolute;  
background: #0a0103;  
height: 2px;  
top: 8px;  
}

#workskin #chapters hr.redorb:before {  
left: 0;  
right: 50%;  
margin-right: 10px;  
}

#workskin #chapters hr.redorb:after {  
right: 0;  
left: 50%;  
margin-left: 10px;  
}

#workskin img.center {  
max-width: 100%;  
height: auto;  
display: block;  
margin-left: auto;  
margin-right: auto;  
}

#workskin #chapters div.userstuff p {  
text-indent: 30px;  
}

#workskin #chapters div.userstuff p.center {/* <p class="center">text</p> */  
display: block;  
text-align: center;  
text-indent: 0 !important;/* removes text-indent in order to center text */  
}

#workskin #chapters blockquote {  
border-left: 1px dotted crimson;  
padding-left: 5px;  
}

#workskin #chapters blockquote p.blcqt { /* <blockquote><p class="blcqt">text</p></blockquote> */  
text-indent: 0 !important;/* removes text-indent */  
}

#workskin #chapters .overflow {/* <div class="overflow"><p>To create the boxes you see in demo.</p></div>*/  
border: 1px dotted crimson;  
margin-bottom: 10px;  
width: 100%;  
height: 200px;  
overflow-y: scroll;  
-webkit-user-select: all;/*This is what is letting you select all when clicking inside the overflow class.*/  
user-select: all;  
}

#workskin ::-moz-selection {  
color: crimson;  
background: black;  
}

#workskin ::selection {  
color: crimson;  
background: black;  
}

#workskin ::-webkit-scrollbar {  
height: 15px;  
width: 15px;  
border: 5px solid rgb(80,7,22);  
background: rgb(220,20,60);  
}

#workskin ::-webkit-scrollbar-thumb {  
background: rgb(220,20,60) padding-box;  
border: solid rgb(80,7,22);  
border-width: 6px 0;  
}

#workskin audio {  
width: 50%;  
}

#workskin audio:focus {  
outline: none;  
}

* * *

♥ Enjoy ♥

* * *

* * *


End file.
